<html>
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gridea</title>
<meta name="description" content="温故而知新" />
<link rel="shortcut icon" href="https://Dr-li123.github.io/favicon.ico?v=1623980913562">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

<link rel="stylesheet" href="https://Dr-li123.github.io/styles/main.css">



  </head>
  <body>
    <div id="app" class="main px-4 flex flex-col lg:flex-row">
      <div id="sidebar" class="sidebar-wrapper lg:static lg:w-1/4">
  <div class="lg:sticky top-0">
    <div class="sidebar-content">
      <div class="flex lg:block p-4 lg:px-0 items-center fixed lg:static lg:block top-0 right-0 left-0 bg-white z-50">
        <i class="ri-menu-2-line lg:mt-4 text-2xl cursor-pointer animated fadeIn" onclick="openMenu()"></i>
        <a href="https://Dr-li123.github.io">
          <img class="animated fadeInLeft avatar rounded-lg mx-4 lg:mt-32 lg:mx-0 mt-0 lg:w-24 lg:h-24 w-12 w-12" src="https://Dr-li123.github.io/images/avatar.png?v=1623980913562" alt="">
        </a>
        <h1 class="animated fadeInLeft lg:text-4xl font-extrabold lg:mt-8 mt-0 text-xl" style="animation-delay: 0.2s">Gridea</h1>
      </div>
      
        <div class="animated fadeInLeft" style="animation-delay: 0.4s">
          <p class="my-4 text-gray-600 font-light hidden lg:block">
            文章目录
          </p>
          <div class="toc-container hidden lg:block">
            <ul class="markdownIt-TOC">
<li><a href="#markdown-%E6%A0%87%E9%A2%98">Markdown 标题</a>
<ul>
<li><a href="#1-%E4%BD%BF%E7%94%A8%E5%92%8C-%E6%A0%87%E8%AE%B0%E4%B8%80%E7%BA%A7%E5%92%8C%E4%BA%8C%E7%BA%A7%E6%A0%87%E9%A2%98">1. 使用=和-标记一级和二级标题</a></li>
<li><a href="#2-%E4%BD%BF%E7%94%A8space%E6%A0%87%E8%AE%B0">2. 使用#+space标记</a></li>
</ul>
</li>
<li><a href="#%E6%AE%B5%E8%90%BD%E6%A0%BC%E5%BC%8F">段落格式</a>
<ul>
<li><a href="#1-markdown%E6%AE%B5%E8%90%BD">1. Markdown段落</a></li>
<li><a href="#2-markdown%E5%AD%97%E4%BD%93">2. Markdown字体</a></li>
<li><a href="#3-%E5%88%86%E5%89%B2%E7%BA%BF">3. 分割线</a></li>
<li><a href="#4-%E5%88%A0%E9%99%A4%E7%BA%BF%E6%B5%8B%E8%AF%95">4. 删除线测试</a></li>
<li><a href="#5-%E4%B8%8B%E5%88%92%E7%BA%BF%E6%B5%8B%E8%AF%95">5. 下划线测试</a></li>
<li><a href="#6-%E8%84%9A%E6%B3%A8%E6%B5%8B%E8%AF%95">6. 脚注测试</a></li>
</ul>
</li>
<li><a href="#markdown%E5%88%97%E8%A1%A8%E6%B5%8B%E8%AF%95">Markdown列表测试</a>
<ul>
<li><a href="#1-%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8">1. 无序列表</a></li>
<li><a href="#2-%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8">2. 有序列表</a></li>
<li><a href="#3-%E5%88%97%E8%A1%A8%E5%B5%8C%E5%A5%97">3. 列表嵌套</a></li>
</ul>
</li>
<li><a href="#markdown%E5%8C%BA%E5%9D%97">Markdown区块</a>
<ul>
<li><a href="#1-%E5%8C%BA%E5%9D%97%E5%BC%95%E7%94%A8">1. 区块引用</a></li>
<li><a href="#2-%E5%8C%BA%E5%9D%97%E5%B5%8C%E5%A5%97">2. 区块嵌套</a></li>
<li><a href="#3-%E5%8C%BA%E5%9D%97%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%88%97%E8%A1%A8">3. 区块中使用列表</a></li>
<li><a href="#4-%E5%88%97%E8%A1%A8%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%8C%BA%E5%9D%97">4. 列表中使用区块</a></li>
</ul>
</li>
<li><a href="#markdown%E4%BB%A3%E7%A0%81">Markdown代码</a>
<ul>
<li><a href="#1-%E6%AE%B5%E8%90%BD%E4%B8%8A%E7%9A%84%E4%BB%A3%E7%A0%81">1. 段落上的代码</a></li>
<li><a href="#2-%E4%BB%A3%E7%A0%81%E5%8C%BA%E5%9D%97">2. 代码区块</a></li>
</ul>
</li>
<li><a href="#markdown%E9%93%BE%E6%8E%A5">Markdown链接</a>
<ul>
<li><a href="#1-%E9%93%BE%E6%8E%A5%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95">1. 链接使用方法：</a>
<ul>
<li><a href="#11-%E7%BB%99%E9%93%BE%E6%8E%A5%E5%A2%9E%E5%8A%A0-title">1.1 给链接增加 Title</a></li>
<li><a href="#12-email%E5%9C%B0%E5%9D%80">1.2 Email地址</a></li>
<li><a href="#13-%E5%B8%A6%E6%A0%BC%E5%BC%8F%E5%8C%96%E7%9A%84%E9%93%BE%E6%8E%A5">1.3 带格式化的链接</a></li>
</ul>
</li>
<li><a href="#2-%E9%AB%98%E7%BA%A7%E9%93%BE%E6%8E%A5">2. 高级链接</a></li>
</ul>
</li>
<li><a href="#markdown%E5%9B%BE%E7%89%87">Markdown图片</a></li>
<li><a href="#markdown%E8%A1%A8%E6%A0%BC">Markdown表格</a>
<ul>
<li><a href="#%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F">对齐方式</a></li>
</ul>
</li>
<li><a href="#markdown%E9%AB%98%E7%BA%A7%E6%8A%80%E5%B7%A7">Markdown高级技巧</a>
<ul>
<li><a href="#1%E6%94%AF%E6%8C%81%E7%9A%84html%E5%85%83%E7%B4%A0">1.支持的HTML元素</a></li>
<li><a href="#2-%E8%BD%AC%E4%B9%89">2. 转义</a></li>
</ul>
</li>
</ul>

          </div>
        </div>
      
    </div>
  </div>
</div>

<div class="menu-container">
  <i class="ri-arrow-left-line text-2xl cursor-pointer animated fadeIn close-menu-btn" onclick="closeMenu()"></i>
  <div>
    
      
        <a href="https://Dr-li123.github.io" class="menu" style="animation-delay: 0s">
          首页
        </a>
      
    
      
        <a href="https://Dr-li123.github.io/archives" class="menu" style="animation-delay: 0.2s">
          归档
        </a>
      
    
      
        <a href="https://Dr-li123.github.io/tags" class="menu" style="animation-delay: 0.4s">
          标签
        </a>
      
    
      
        <a href="https://Dr-li123.github.io/post/about" class="menu" style="animation-delay: 0.6000000000000001s">
          关于
        </a>
      
    
  </div>
  <div class="site-footer">
    <div class="py-4 text-gray-700">Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a></div>
    <a class="rss" href="https://Dr-li123.github.io/atom.xml" target="_blank">RSS</a>
  </div>
</div>
<div class="mask" onclick="closeMenu()">
</div>
      <div class="content-wrapper py-32 lg:p-8 lg:w-3/4 post-detail animated fadeIn">
        <h1 class="text-3xl font-bold lg:mt-16">Markdown 开始</h1>
        <div class="text-sm text-gray-700 lg:my-8">
          2021-06-11 / 7 min read
        </div>
        
          <img class="post-feature-image rounded-lg mx-auto my-4" src="https://Dr-li123.github.io/post-images/markdown-kai-shi.png" alt="">
        
        <div class="post-content yue">
          <p><font size=7>Markdown教程</font></p>
<h1 id="markdown-标题">Markdown 标题</h1>
<p>Markdown标题有两种格式</p>
<h2 id="1-使用和-标记一级和二级标题">1. 使用=和-标记一级和二级标题</h2>
<p>=和-标记语法格式如下：</p>
<pre><code class="language-Markdown">一级标题
=======

二级标题
-------
</code></pre>
<h2 id="2-使用space标记">2. 使用#+space标记</h2>
<p>使用#号可以表示1-6级标题，一级标题对应一个#号，二级标题队友两个#号，以此类推</p>
<pre><code class="language-Markdown"># 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
</code></pre>
<h1 id="段落格式">段落格式</h1>
<h2 id="1-markdown段落">1. Markdown段落</h2>
<p>Mardown段落没有特殊格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车。<br>
也可以再段落后面使用一个空行来表示重新开始一个段落。</p>
<h2 id="2-markdown字体">2. Markdown字体</h2>
<pre><code class="language-markdown">*斜体文字*
_斜体文字_
**粗体文字**
__粗体文字__
***粗斜体文字***
___粗斜体文字___
</code></pre>
<h2 id="3-分割线">3. 分割线</h2>
<p>可以在一行中使用三个以上的星号、减号、底线来建立一个分割线，行内不能有其他东西。也可以在符号中间插入空格。下面几种写法都可以建立分割线：</p>
<pre><code class="language-markdown">***
* * *
*****
- - -
-------
_______
</code></pre>
<h2 id="4-删除线测试">4. 删除线测试</h2>
<p>如果段落上的文字需要添加删除线，可以通过文字的两端加上两个波浪线实现：</p>
<pre><code class="language-markdown">~~带删除线的文本~~
</code></pre>
<h2 id="5-下划线测试">5. 下划线测试</h2>
<p>如果段落的文字需要添加下划线，可以通过HTML的<code>&lt;u&gt;&lt;/u&gt;</code>标签来实现</p>
<pre><code class="language-markdown">&lt;u&gt;我是带下划线的文本&lt;/u&gt;
</code></pre>
<h2 id="6-脚注测试">6. 脚注测试</h2>
<p>脚注是对文本的补充说明。格式如下：</p>
<pre><code class="language-markdown">[^要注明的文本 ]
</code></pre>
<h1 id="markdown列表测试">Markdown列表测试</h1>
<p>Markdown支持有序列表和无序列表</p>
<h2 id="1-无序列表">1. 无序列表</h2>
<p>无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记，这些标记要添加一个空格，然后再填写内容:</p>
<pre><code class="language-markdown">* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项

- 第一项
- 第二项
- 第三项
</code></pre>
<h2 id="2-有序列表">2. 有序列表</h2>
<p>有序列表使用数字加上<code>.</code>号来表示，标记后面要加上一个空格，然后在填写内容：</p>
<pre><code class="language-markdown">1. 第一项
2. 第二项
3. 第三项
</code></pre>
<h2 id="3-列表嵌套">3. 列表嵌套</h2>
<p>列表嵌套只需再子列表中的选项前面添加四个空格即可：</p>
<pre><code class="language-markdown">1. 第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项：
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素
</code></pre>
<h1 id="markdown区块">Markdown区块</h1>
<h2 id="1-区块引用">1. 区块引用</h2>
<p>Markdown区块引用是再段落开头使用<code>&gt;</code>符号，然后后面紧跟一个空格符号：</p>
<pre><code class="language-markdown">&gt; Markdown区块
&gt; Markdown区块
&gt; Markdown区块
</code></pre>
<h2 id="2-区块嵌套">2. 区块嵌套</h2>
<p>区块是可以嵌套的，一个<code>&gt;</code>符号是最外层，两个<code>&gt;</code>是第一次嵌套，以此类推：</p>
<pre><code class="language-markdown">&gt; 最外层
&gt; &gt; 第一层嵌套
&gt; &gt; &gt; 第二层嵌套
</code></pre>
<h2 id="3-区块中使用列表">3. 区块中使用列表</h2>
<pre><code class="language-markdown">&gt; 区块中使用列表
&gt; 1. 第一项
&gt; 2. 第二项
&gt; + 第一项
&gt; + 第二项
&gt; + 第三项
</code></pre>
<h2 id="4-列表中使用区块">4. 列表中使用区块</h2>
<p>如果在列表项目内放区块，那么就需要在<code>&gt;</code>前面添加四个空格的缩进：</p>
<pre><code class="language-markdown">* 第一项
	&gt; 第一个
	&gt; 第二个
* 第二项
</code></pre>
<h1 id="markdown代码">Markdown代码</h1>
<h2 id="1-段落上的代码">1. 段落上的代码</h2>
<p>如果段落上的一个函数或者片段的代码可以用反引号把他包起来(`),例如：</p>
<pre><code class="language-markdown">`printf()` 函数
</code></pre>
<p>输出结果为：<code>printf()</code>函数</p>
<h2 id="2-代码区块">2. 代码区块</h2>
<p>代码区块使用四个空格或者一个制表符(Tab)。<br>
示例如下：</p>
<pre><code class="language-markdown">    &lt;body&gt;这是代码区块&lt;/body&gt;
</code></pre>
<p>也可以用```包裹一段代码，并指定一种语言(也可以不指定)。</p>
<h1 id="markdown链接">Markdown链接</h1>
<h2 id="1-链接使用方法">1. 链接使用方法：</h2>
<pre><code class="language-markdown">这是一个链接[哔哩哔哩](https://bilibili.com)
或者&lt;https://bilibili.com&gt;
</code></pre>
<blockquote>
<p>输出结果为：<br>
这是一个链接<a href="https://bilibili.com">哔哩哔哩</a><br>
或者<a href="https://bilibili.com">https://bilibili.com</a></p>
</blockquote>
<h3 id="11-给链接增加-title">1.1 给链接增加 Title</h3>
<p>链接title是当鼠标悬停在链接文字时会出现的文字，这个title是可选的，他放在与圆括号中的链接地址后面，跟链接地址之间以空格分隔<br>
<code>这是一个链接 [李先生的小站](https://dr-li123.github.io &quot;闲来无事&quot;)。</code></p>
<blockquote>
<p>输出结果为：<br>
这是一个链接<a href="https://dr-li123.github.io" title="闲来无事">李先生的小站</a></p>
</blockquote>
<h3 id="12-email地址">1.2 Email地址</h3>
<p>使用尖括号可以把URL或者Email地址变成可点击的链接。</p>
<pre><code class="language-markdown">&lt;https://dr-li123.github.io&gt;
&lt;2379019672@qq.com&gt;
</code></pre>
<blockquote>
<p>输出结果为：<br>
<a href="https://dr-li123.github.io">https://dr-li123.github.io</a><br>
<a href="mailto:2379019672@qq.com">2379019672@qq.com</a></p>
</blockquote>
<h3 id="13-带格式化的链接">1.3 带格式化的链接</h3>
<p><u>强调</u>链接，在链接语法后增加星号。要将链接表示为代码，请在方括号中添加反引号。</p>
<pre><code class="language-markdown">李先生的小站 **[ABC](https://dr-li123.github.io)**.
Bilibili *[123](https://bilibili.com)*.
这个代码 [`html`](#html)
</code></pre>
<blockquote>
<p>输出结果为：<br>
李先生的小站 <strong><a href="https://dr-li123.github.io">ABC</a></strong>.<br>
Bilibili <em><a href="https://bilibili.com">123</a></em>.<br>
这个代码 <a href="#html"><code>html</code></a></p>
</blockquote>
<h2 id="2-高级链接">2. 高级链接</h2>
<p>可以通过变量来设置一个链接，变量赋值再文档末尾进行：</p>
<pre><code class="language-markdown">这个链接用 1 作为网址变量 [bi][1]
这个链接用 2 作为网址变量 [b][2]

[1]:https://bilibili.com
[2]: https://cn.bing.com
</code></pre>
<blockquote>
<p>输出结果为：<br>
这个链接用 1 作为网址变量 <a href="https://.bilibili.com">bi</a><br>
这个链接用 2 作为网址变量 <a href="https://cn.bing.com">b</a></p>
</blockquote>
<h1 id="markdown图片">Markdown图片</h1>
<p>Markdown图片语法格式如下：</p>
<pre><code class="language-markdown">![alt 属性文本](图片地址)
![alt 属性文本](图片地址&quot;可选标题&quot;)
</code></pre>
<ul>
<li>开头一个感叹号！</li>
<li>接着一个方括号，里面放上图片代替的文字</li>
<li>接着一个普通括号，立马放上图片的地址，最后还可以用引号宝珠并加上选择性的“title”属性的文字。</li>
</ul>
<pre><code class="language-markdown">使用实例：
![啊这](https://ftp.bmp.ovh/imgs/2021/06/0077e4d66fd9bb92.jpg)
</code></pre>
<blockquote>
<p>输出结果为：<br>
<img src="https://ftp.bmp.ovh/imgs/2021/06/0077e4d66fd9bb92.jpg" alt="啊这" loading="lazy"></p>
</blockquote>
<h1 id="markdown表格">Markdown表格</h1>
<p>Markdown制作表格只要|来分割不同的单元格，使用减号来分割表头和其他行。<br>
语法格式如下:</p>
<pre><code class="language-markdown">| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
</code></pre>
<h2 id="对齐方式">对齐方式</h2>
<p>我们可以设置表格的对齐方式：</p>
<ul>
<li>-:  设置内容和标题栏居右对齐</li>
<li>:-  设置内容和标题栏居左对齐</li>
<li>:-: 设置内容和标题栏居中对齐<br>
示例如下：</li>
</ul>
<pre><code class="language-markdown">| 左对齐 | 右对齐 | 居中对齐 |
| :---- | ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
</code></pre>
<h1 id="markdown高级技巧">Markdown高级技巧</h1>
<h2 id="1支持的html元素">1.支持的HTML元素</h2>
<p>不在Markdown涵盖的范围之内的标签，都可以再文档里直接用HTML撰写。<br>
目前支持的HTML元素有<code>&lt;kbd&gt;&lt;b&gt;&lt;i&gt;&lt;em&gt;&lt;sup&gt;&lt;sub&gt;&lt;br&gt;</code>等如：<br>
<code>使用&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;Alt&lt;/kbd&gt;+&lt;kbd&gt;Del&lt;/kbd&gt; 重启电脑</code></p>
<blockquote>
<p>输出结果为：<br>
使用<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑</p>
</blockquote>
<h2 id="2-转义">2. 转义</h2>
<p>Markdown 使用了很多特殊符号来表示特定的意义，如果使用显示指定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符</p>
<pre><code class="language-markdown">**文本加粗**
\*\*正常显示星号\*\*
</code></pre>
<blockquote>
<p>输出结果为：<br>
<strong>文本加粗</strong><br>
**正常显示星号**</p>
</blockquote>
<p>Markdown 支持以下这些符号在前面加反斜杠来帮助插入符号:</p>
<pre><code class="language-markdown">\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句号
! 感叹号
</code></pre>

        </div>

        


        <div class="flex justify-between py-8">
          
            <div class="prev-post">
              <a href="https://Dr-li123.github.io/post/ce-shi/">
                <h3 class="post-title">
                  <i class="ri-arrow-left-line"></i>
                  测试
                </h3>
              </a>
            </div>
          

          
            <div class="next-post">
              <a href="https://Dr-li123.github.io/post/hello-gridea/">
                <h3 class="post-title">
                  Hello Gridea
                  <i class="ri-arrow-right-line"></i>
                </h3>
              </a>
            </div>
          
        </div>

        

      </div>
    </div>

    <script src="https://Dr-li123.github.io/media/prism.js"></script>  
<script>

Prism.highlightAll()
let mainNavLinks = document.querySelectorAll(".markdownIt-TOC a");

// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
//    _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.

window.addEventListener("scroll", event => {
  let fromTop = window.scrollY;

  mainNavLinks.forEach((link, index) => {
    let section = document.getElementById(decodeURI(link.hash).substring(1));
    let nextSection = null
    if (mainNavLinks[index + 1]) {
      nextSection = document.getElementById(decodeURI(mainNavLinks[index + 1].hash).substring(1));
    }
    if (section.offsetTop <= fromTop) {
      if (nextSection) {
        if (nextSection.offsetTop > fromTop) {
          link.classList.add("current");
        } else {
          link.classList.remove("current");    
        }
      } else {
        link.classList.add("current");
      }
    } else {
      link.classList.remove("current");
    }
  });
});


document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll(".post-feature-image.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target
          lazyImage.style.backgroundImage = `url(${lazyImage.dataset.bg})`
          lazyImage.classList.remove("lazy")
          lazyImageObserver.unobserve(lazyImage)
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage)
    })
  } else {
    // Possibly fall back to a more compatible method here
  }
});

const menuContainer = document.querySelector('.menu-container')
const menus = document.querySelectorAll('.menu-container .menu')
const mask = document.querySelector('.mask')
const contentWrapper = document.querySelector('.content-wrapper')
const latestArticle = document.querySelector('.latest-article')
const readMore = document.querySelector('.read-more')
const indexPage = document.querySelector('.index-page')

const isHome = location.pathname === '/'
if (latestArticle) {
  latestArticle.style.display = isHome ? 'block' : 'none'
  readMore.style.display = isHome ? 'block' : 'none'
  indexPage.style.display = isHome ? 'none' : 'block'
}

const openMenu = () => {
  menuContainer.classList.add('open')
  menus.forEach(menu => {
    menu.classList.add('animated', 'fadeInLeft')
  })
  mask.classList.add('open')
  contentWrapper.classList.add('is-second')
}

const closeMenu = () => {
  menuContainer.classList.remove('open')
  menus.forEach(menu => {
    menu.classList.remove('animated', 'fadeInLeft')
  })
  mask.classList.remove('open')
  contentWrapper.classList.remove('is-second')
}
</script>
  
  </body>
</html>
